import { Button, Form, Input, message } from 'antd';
import { useEffect, useState } from 'react';

import agreementService from '@/api/services/setting/aboutService';
import Editor from '@/components/editor';
import { DictSelect } from '@/components/select/dict-select';
import { hasPermission } from '@/utils/permission';

export default function EditorPage() {
  const [quillFull, setQuillFull] = useState('');
  const [id, setId] = useState(Number(undefined));
  const [agreementType, setAgreementType] = useState('1934527973025886208');
  const [titleValue, setTitleValue] = useState('');
  const onSelect = (value: string) => {
    setAgreementType(value);
  };
  useEffect(() => {
    getAgreement(agreementType);
  }, [agreementType]);
  const getAgreement = (value?: string) => {
    const transData = {
      type: value,
    };

    agreementService.getAgreementList(transData).then((res) => {
      if (res.count === 0) {
        setId(undefined);
        setQuillFull('');
        setTitleValue('');
      } else {
        const item = res[0];
        setId(item.id);
        setQuillFull(item.content);
        setTitleValue(item.title);
        if (typeof item.type === 'string') {
          setAgreementType(item.type);
        } else {
          // 如果返回的是一个对象，我们取它的id作为类型ID
          setAgreementType(item.type.id);
        }
      }
    });
  };
  const onCreate = () => {
    if (!titleValue) {
      message.error('请输入文本标题');
      return;
    }
    const transData = {
      title: titleValue,
      content: quillFull,
      type: agreementType,
    };

    agreementService.createAgreement(transData).then(() => {
      message.success('新增成功');
      getAgreement(agreementType);
    });
  };
  const onEdit = () => {
    const transData = {
      title: titleValue,
      content: quillFull,
      type: agreementType,
    };
    agreementService.updateAgreement(id, transData).then(() => {
      message.success('修改成功');
    });
  };
  const titeOnChange = (value: string) => {
    setTitleValue(value);
  };
  return (
    <>
      <Form layout="inline" style={{ padding: 10 }}>
        <Form.Item label="文本类型">
          <DictSelect
            value={agreementType}
            defaultValue="1934527973025886208"
            onSelect={(val) => onSelect(val)}
            style={{ width: '300px' }}
            dictKey="agreement_type"
          />
        </Form.Item>
        <Form.Item label="文本标题" rules={[{ required: true, message: '请输入文本类型' }]}>
          <Input
            defaultValue={titleValue}
            value={titleValue}
            onChange={(e) => titeOnChange(e.target.value)}
            style={{ width: '300px' }}
          />
        </Form.Item>
      </Form>
      <Editor
        id="full-editor"
        value={quillFull}
        onChange={setQuillFull}
        style={{ height: '72vh' }}
      />
      {!id && hasPermission('NJG:AGREEMENT:CREATE') && (
        <Button
          type="primary"
          onClick={onCreate}
          style={{ float: 'right', marginTop: '20PX', marginLeft: '5px' }}
        >
          确认新增
        </Button>
      )}
      {id && hasPermission('NJG:AGREEMENT:UPDATE') && (
        <Button
          type="primary"
          onClick={onEdit}
          style={{ float: 'right', marginTop: '20PX', marginLeft: '5px' }}
        >
          确认修改
        </Button>
      )}
    </>
  );
}
